<template>

    <el-container>
        <el-header style="padding: 0px;">
            <el-row class="block-col-2">
                <el-col :span="12">
                    <el-select @change="siteChange" v-model="curSiteId" filterable placeholder="请选择站点">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="12">
                    <el-date-picker @change="dateChange"  v-model="s_date"  type="daterange" value-format="yyyy-MM-dd" align="right" unlink-panels  range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2">
                    </el-date-picker>
                </el-col>
            </el-row>

        </el-header>
        <el-main style="padding: 0px;">

            <el-tag type="info" class="zhibiao">作弊嫌疑的网站列表</el-tag>
            <el-table
                    v-loading="loading"
                    stripe
                    :data="tableData"
                    style="width:100%"
                    border
            >
                <el-table-column label="序号" type="index"  width="50"></el-table-column>
                <el-table-column prop="siteName"  label="网站域名"></el-table-column>
                <el-table-column prop="siteHome"  label="网站页面"></el-table-column>
                <el-table-column prop="siteHome" label="网站ID" ></el-table-column>
                <el-table-column prop="siteHome" label="网站名称" ></el-table-column>
                <el-table-column prop="siteHome" label="浏览数"></el-table-column>
                <el-table-column prop="siteHome" label="cookie"></el-table-column>
                <el-table-column prop="siteHome" label="点击率"></el-table-column>

            </el-table>

            <div align="center">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalCount">
                </el-pagination>
            </div>
        </el-main>


    </el-container>



</template>


<script>
    import Cookies from 'js-cookie';
    import {getBaseUrl} from '../../../static/config/axios.conf' //注意路径


    export default {
        name: 'cheat',
        components: {

        },
        data() {
            return {
                pickerOptions2: {
                    shortcuts: [{
                        text: '近7天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);//往前推一天
                            end.setTime(end.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    },  {
                        text: '近14天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
                            end.setTime(end.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    },{
                        text: '近30天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 31);
                            end.setTime(end.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '近半年',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 181);
                            end.setTime(end.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                //表格当前页数据
                tableData: [],
                //多选数组
                multipleSelection: [],
                //下拉菜单选项
                select: '',
                //默认每页数据量
                pagesize: 10,
                //默认高亮行数据id
                highlightId: -1,
                //当前页码
                currentPage: 1,
                //查询的页码
                start: 1,
                //默认数据总数
                totalCount: 0,
                userid:'',
                curSiteId:'',
                s_date:'',
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }],
            }//return
        },//data
        methods: {
            //加载table数据
            loadData: function(pageNum, pageSize){
                let params =new URLSearchParams();
                params.append("userid",this.userid);
                params.append("pageNum",pageNum);
                params.append("pageSize",pageSize);
                this.$axios.post('/site/getSiteListByPage',params).then((res)=> {
                    this.tableData = res.data.pagesdata;
                    this.totalCount = res.data.number;
                }).catch((error)=> {
                    console.log(error);
                });
            },
            //搜索
            search: function(){
                this.currentPage=1;
                this.loadData(this.currentPage, this.pagesize);
            },

            //每页显示数据量变更
            handleSizeChange: function(val) {
                this.pagesize = val;
                this.loadData(this.currentPage, this.pagesize);
            },
            //页码变更
            handleCurrentChange: function(val) {
                this.currentPage = val;
                this.loadData(this.currentPage, this.pagesize);
            },
            getSiteList:function () {
                let params =new URLSearchParams();
                params.append("userid",this.userid);
                this.$axios.post('/site/getSiteList',params).then((res)=> {
                    let list = res.data.list;
                    for(let i=0;i<list.length;i++){
                        this.options.push({"value":list[i].id,"label":list[i].siteName+"-"+list[i].siteHome});
                    }
                    if(list.length>0){
                        this.curSiteId=list[0].id;
                    }

                });

            },

        },mounted(){
            let userid = Cookies.get('xbsj_userid');
            this.userid = userid;
            this.getSiteList();

            this.loadData(this.currentPage, this.pagesize);

        },
    };


</script>

<style>
    .zhibiao{
        width: 100%;
        border-radius: 0px;
        border-bottom: 0px;
        font-size: 14px;
        color: #666;
        font-weight: bold;
        padding-left: 10px;
        padding-bottom: 35px;
        padding-top: 6px;
        background: #f9f9f9;
        border-color: #f9f9f9;
    }

</style>